<template>
	<view>
		<view v-if="!boxHide">
			<view class="info_box" v-for="item in product_list" :key="index">
				<view class="box_title">销售明细</view>
				<view class="info_item_title">{{item.product_name}}</view>
				<view class="info_font_double">
					<view class="font_item w120">
						<view>规格</view>
						<view>{{item.product_specifications}}</view>
					</view>
					<view class="font_item w80">
						<view>型号</view>
						<view>{{item.product_module}}</view>
					</view>
				</view>

				<view class="info_font_double">
					<view class="font_item w120">
						<view>销售单价</view>
						<view>{{item.product_price}}元/台</view>
					</view>
					<view class="font_item w80">
						<view>数量</view>
						<view>{{item.number}}</view>
					</view>
				</view>

				<view class="info_font_double">
					<view class="font_item w120">
						<view>单位</view>
						<view><text v-if="item.product_unit">{{item.product_unit}}</text><text v-if="!item.product_unit">无</text></view>
					</view>
					<view class="font_item w80">
						<view>总额</view>
						<view>¥{{item.product_price * item.number}}</view>
					</view>
				</view>

				<view class="font_item w80">
					<view>库房</view>
					<view>{{item.warehouse_title}}</view>
				</view>
				<view class="font_item w80">
					<view>备注</view>
					<view><text v-if="item.desc">{{item.desc}}</text><text v-if="!item.desc">无</text></view>
				</view>
			</view>

			<view class="info_box">
				<view class="font_item">
					<view>订单编号</view>
					<view>{{ orderList.order_no }}</view>
				</view>
				<view class="font_item">
					<view>订单状态</view>
					<view> {{orderList.type}} </view>
				</view>
				<view class="font_item">
					<view>成交日期</view>
					<view> <text v-if="orderList.close_at">{{ orderList.close_at }}</text><text v-if="!orderList.close_at">暂无</text></view>
				</view>
				<view class="font_item">
					<view>订单类别</view>
					<view> {{ orderList.class }} </view>
				</view>
				<view class="font_item color_red">
					<view>订单金额：</view>
					<view>¥{{ orderList.total_price }}</view>
				</view>
			</view>

			<view class="info_box">
				<view class="box_title">客户</view>
				<view class="font_item">
					<view>客户姓名</view>
					<view>{{orderList.customer_title}}</view>
				</view>
				<view class="font_item">
					<view>联系电话</view>
					<view class="font_item_phone">{{orderList.mobile}}
						<image src="/static/images/phone.png"></image>
					</view>
				</view>
				<view class="font_item">
					<view>客户类型</view>
					<view>{{orderList.customer_type}}</view>
				</view>
				<view class="font_item">
					<view>购买单位</view>
					<view>{{orderList.buy_unit}}</view>
				</view>
				<view class="font_item">
					<view>收货地址</view>
					<view>{{orderList.address}}</view>
				</view>
			</view>

			<view class="info_box">
				<view class="box_title">日期备注</view>
				<view class="font_item">
					<view>业务员</view>
					<view>{{orderList.user_name}}</view>
				</view>
				<view class="font_item">
					<view>开单日期</view>
					<view>{{orderList.create_at}}</view>
				</view>
				<view class="font_item">
					<view>销售单位</view>
					<view>{{orderList.sale_unit?orderList.sale_unit:'无'}}</view>
				</view>
				<view class="font_item">
					<view>订单备注</view>
					<view>{{orderList.desc}}</view>
				</view>
				<view class="font_item">
					<view>质保日期</view>
					<view>{{orderList.zb_date}}</view>
				</view>
			</view>

			<view class="info_box">
				<view class="box_title">发货配送</view>
				<view class="font_item">
					<view>是否发货</view>
					<view>{{orderList.is_ship === 0 ? '需要' : '不需要'}}</view>
				</view>
				<view class="font_item">
					<view>交货日期</view>
					<view>{{orderList.is_ship === 0 ? orderList.jh_date:'暂无' }}</view>
				</view>
				<view class="font_item">
					<view>发货说明</view>
					<view> {{ orderList.fh_desc }} </view>
				</view>
			</view>

			<view class="info_box">
				<view class="box_title">收款开票</view>
				<view class="font_item">
					<view>收款方式</view>
					<view>{{orderList.payment_method}}</view>
				</view>
				<view class="font_item">
					<view>收款期限</view>
					<view>{{orderList.sk_date}}</view>
				</view>
				<view class="font_item">
					<view>是否开票</view>
					<view>{{orderList.is_payment === 0 ? '开发票' : '不开发票'}}</view>
				</view>
				<view class="font_item" v-if="orderList.is_payment === 0">
					<view>发票类型</view>
					<view>{{orderList.invoice_type}}</view>
				</view>
				<view class="font_item" v-if="orderList.is_payment === 0">
					<view>发票抬头</view>
					<view>{{orderList.invoice_up}}</view>
				</view>
				<view class="font_item" v-if="orderList.is_payment === 0">
					<view>发票编号</view>
					<view>{{orderList.Invoice_number}}</view>
				</view>
				<view class="font_item">
					<view>财务说明</view>
					<view>{{orderList.payment_desc}}</view>
				</view>
			</view>

			<view class="info_box">
				<view class="box_title">安装流转</view>
				<view class="font_item">
					<view>预约安装</view>
					<view>{{orderList.is_installation === 0 ? '安装' : '不安装'}}</view>
				</view>
				<view class="font_item">
					<view>预约日期</view>
					<view>{{orderList.reservation_date}}</view>
				</view>
				<view class="font_item">
					<view>安装说明</view>
					<view>{{orderList.az_desc}}</view>
				</view>
			</view>

			<view class="info_box">
				<view class="box_title">附件</view>
				<view class="info_img_box">
					<template v-for="(item,index) in orderList.file_path">
						<view class="image_box" :key="index">
							<image :src="item" @click.stop='lookImg(index)'></image>
						</view>
					</template>
				</view>
			</view>

			<view class="info_box">
				<view class="box_title">其他信息</view>
				<view class="font_item">
					<view>产品条码</view>
					<view>{{orderList.barcode}}</view>
				</view>
				<view class="font_item w240">
					<view>回访机器实际数量</view>
					<view>{{orderList.device_num}}</view>
				</view>
				<view class="font_item">
					<view>客户评分</view>
					<view>{{orderList.score}}</view>
				</view>
				<view class="font_item">
					<view>出库时间</view>
					<view>{{orderList.ck_date?orderList.ck_date:'暂无'}}</view>
				</view>
			</view>
		</view>
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [],
				product_list: [],
				boxHide: true
			}
		},

		onLoad(options) {
			console.log(options)
			this.getJson(options.id)
		},
		methods: {
			getJson(id) {
				this.$refs.load.initLoading({
					loadType: 0
				}).then(res => {
					this.$api.getOrderDetail({
						id: id
					}).then((res) => {
						this.boxHide = false;
						this.orderList = res;
						this.orderList.az_desc = this.orderList.az_desc ? this.orderList.az_desc : '无'
						this.orderList.fh_desc = this.orderList.fh_desc ? this.orderList.fh_desc : '无'
						this.orderList.buy_unit = this.orderList.buy_unit ? this.orderList.buy_unit : '无'
						this.product_list = res.product_list;
						this.$refs.load.getLoadingData({})
					})
				})
			},
			lookImg(index) {
				let that = this;
				uni.previewImage({
					urls: that.orderList.file_path,
					current: index,
				})
			},
		}
	}
</script>

<style>
	.info_box {
		width: 100%;
		padding: 30upx 0;
		background: #FFFFFF;
		margin-bottom: 20upx;
	}

	.info_item_title {
		font-size: 30upx;
		color: #049BFF;
		line-height: 60upx;
		text-indent: 30upx;
		margin-top: 10upx;
	}

	.info_font_double {
		display: flex;
		flex-direction: row;
	}

	.info_item {
		min-height: 75upx;
	}

	.info_item view:nth-child(1) {
		width: 130upx;
	}

	.w80 view:nth-child(1) {
		width: 80upx;
	}

	.w120 view:nth-child(1) {
		width: 120upx;
	}

	.w240 view:nth-child(1) {
		width: 240upx;
	}

	.info_font_double .font_item {
		width: 50%;
	}

	.color_red view {
		color: #FF5050;
		font-size: 30upx;
	}

	.info_img_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.info_img_box image {
		width: 160upx;
		height: 160upx;
		margin-left: 10upx;
		margin-top: 30upx;
	}
</style>
